<template>
    <el-container v-loading="loading">
        <div class="container">
            <h1  style="font-size: 44px;">Publications</h1>
            <p>
                You can visit <a href="https://scholar.google.com/citations?user=hbDdbHUAAAAJ&hl=en" target="_blank">Google Scholar</a> for more details<br>
                * Co-first authors # Co-corresponding authors
            </p>
            <div class="year_container" v-for="year in sortedYears" :key="year" :id="year">
                <h1 style="font-size: 33px;">{{ year }}</h1>
                <div class="article-item" v-for="(item,) in articleListByYear[year]">
                    <div class="article-content">
                        <div class="article-info">
                            <div>
                                {{ item.fields.index}}. <span v-html="boldAuthor(item)"></span> ({{ year }}). <a :href="item.fields.web_url" target="_blank">{{ item.fields.title }}</a> <i>{{ item.fields.journal }}</i>
                                {{ item.fields.page_info }}
                            </div>
                        </div>
                        <div class="article-tags" v-if="item.fields.tags && item.fields.tags.length > 0">
                            <div class="tag-item"  v-for="tag in item.fields.tags">
                                <div class="tag-button">
                                    <el-button type="primary" round>
                                        <a :href="tag.src" target="_blank">{{ tag.type }}</a>
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>  
            </div>
        </div>
    </el-container>
</template>

<script lang="ts" setup>
    import { get, post } from '../../axios/api';
    import { computed, onBeforeMount, onMounted, onUnmounted, ref } from 'vue';
    import { ElMessage, rowProps } from 'element-plus'
    import _ from 'lodash'

    let articleListByYear: any = ref({})
    let sortedYears:any = ref([])
    let loading = ref(false)
    let total = ref(0)
    let isMobile = ref(window.innerWidth <= 768)

    const props = defineProps(['isMainAuthor', 'showAnchor', ])
    const isMainAuthor = props.isMainAuthor ? props.isMainAuthor : false;
    const highlights:any = ['Wang, HJ', 'Wang, H', 'Jiang, WJ', 'Jiang, W', 'Wu, HJ',  'Lai, F', 'Zhou, J', 'Zhu, H,', 'Kuang, Z', 'Wei, NN', 'Wei, N',]

    const boldAuthor = (item: any) => {
        let author = item.fields.author; // 复制作者字符串
        let index = item.fields.index
        highlights.forEach((substring: any) => {
            const regex = new RegExp(`(${substring})`, 'g');
            author = author.replace(regex, '<strong>$1</strong>');
        });
        return author; // 返回修改后的作者字符串
    }
    async function getData() {
        let res:any = {}
        loading.value = true
        try {
            res = await post('/get_articles/', {is_main_author: isMainAuthor} )
            if (res && res.success) {
                sortedYears.value = Object.keys(res.list).sort((a, b) => {
                    return parseInt(b) - parseInt(a)
                })
                articleListByYear.value = res.list
                total.value = res.origin_data.length
                loading.value = false
            } else {
                loading.value = false
                ElMessage({
                    message: res.msg || 'An error occured',
                    type: 'error',
                })
            }
        } catch (error:any) {
            loading.value = false
            ElMessage({
                message: error,
                type: 'error',
            })
        }
    }

    const resize = window.addEventListener('resize', _.debounce(() => {
        isMobile.value = window.innerWidth <= 768
    }, 300))
        
    onBeforeMount(() => {
        getData()
    })

    onMounted(() => {
        resize
    })

    onUnmounted(() => {
        window.removeEventListener('resize', resize)
    })
</script>

<style scoped>
    a {
        text-decoration: none;
    }

    .container {
        width: 100%;
        position: relative;
    }

    .year_container {
        margin-bottom: 20px;
    }

    .anchor-container {
        position: relative;
    }

    .article-item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

    .article-title {
        font-family: Playfair;
        font-size: 25px;
    }

    .article-info a {
        width: 100%;
        color: #008AFF;
        text-decoration: none;
    }

    .article-info div {
        line-height: 1.5;
    }

    .article-info a:hover {
        /* color: #006621; */
        text-decoration: none;
        cursor: pointer;
    }

    
    .article-content {
        width: 100%;
        margin: 15px 0;
    }

    .article-journal {
        font-family: SourceSansPro;
        color: #006621;
        margin: 10px 0;
    }

    .article-author {
        font-family: SourceSansPro;
        color: #006621;
        margin: 10px 0;
    }

    .article-info {
        width: 100%;
        font-family: Arial, sans-serif;
        font-size: large;
        line-height: 1.24;
        margin-bottom: 5px;
    }

    .article-tags {
        width: 100%;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
    }

    .article-tags a {
        text-decoration: none;
        color: white;
    }

    .tag-item {
        margin: 5px;
    }

    .tag-button a{
        font-size: 17px
    }

    @media screen and (max-width: 768px) {
        .container {
            width: 90%;
            margin: auto;
        }
    }
</style>